
{include file="common/head"}
  
<head>
<!-- 	<script src="/static/flatpickr/flatpickr.min.js"></script>
	<link rel="stylesheet" href="/static/flatpickr/flatpickr.min.css">  -->

	<style>

		.row{margin: 0;}
		#top{background-image: linear-gradient(to right,#C63927, #FA842B);border-bottom: 0 solid #000;z-index: 21;border:0;}
		.section{background-color: #fff;padding:6px;margin: 10px 0;box-shadow: 0 0 2px #666;}
		.section-title{color:#C63927;font-weight: bold;padding: 0 6px;font-size: 1.1rem;}
		.price{color:#C63927;font-size: 1.2rem;text-align: right;}
		.row div{padding: 0;}
		a{color: white;text-decoration: none;}
		.goods{padding: 0;display: flex;justify-content: space-around;flex-wrap: wrap;}
		.card{margin: 4px;border: 0px solid #ccc;flex-grow: 1;border-radius: 2px;box-shadow: 0 0 1px #333;}
	</style>	
</head>

<body style="background-image: linear-gradient(to right,#C63927, #FA842B);">
	
	<!-- 标题 -->
	<div id="top" class="row" class="text-center" >
		<div class="col-2"></div>
		<div class="col-8 text-center" >
			<span class="section-title" style="padding: 0;color:#f7f7f7;">{$sys['sys_name']}</span>
		</div>
		<div class="col-2"></div>
	</div>

	<div style="height:50px;"></div>

	<div class="container" style="max-width: 1200px;margin:0 auto;">
	<!-- 内容 -->	
	<div id="content" >

		<!-- hots goods -->
		<div class="section">
			<div class="section-title">我的购物车</div>
			<div class=" goods" >
				{foreach $my_cart as $kv}
					<div class="card" style="width:42%;max-width:280px;" >
					<div class="card-body" >
						<img src="{$kv['image']}" style="width:100%;overflow:hide;" />
					  	<div class="text-primary ellipsis" >{$kv['name']}</div>
					  	<div>
					  		￥<c class="price">{$kv['price']}</c>
					  	</div>
					</div>
					</div>
				{/foreach}

			</div>
		</div>


		<div  style="height:50px;"></div>
			

	</div>


	<div id="mask">mask layer</div>
	
	<!-- 底部栏 -->
 	{include file="common/bottom"}

	<div style="height: 50px;"></div>
	</div>


<script type="text/javascript">

	$(document).ready(function(){
		$("#to_cart").css({'background-image': 'linear-gradient(to top,#C63927, #FA842B)'});

		$("#mask").on('click',function(){
			$(this).hide();
		})




	});
</script>
</body>
</html>